<template>
  <div style="width: 100%">
    <el-row class="header">
      <!-- 名称 -->
      <el-col :xs="{ span: 22, offset: 1 }" :lg="{ span: 13, offset: 2 }" style="position: relative;">
        <span class="logo">前端小飞</span>
        <span class="motto">专注前端开发，向全栈发展</span>
        <span class="weather" v-if="DayWeather.name">{{DayWeather.name}} &nbsp;&nbsp;{{DayWeather.text}}&nbsp;&nbsp; {{DayWeather.tem + '℃'}}</span>
      </el-col>
      <!-- 功能模块 子应用的切换 -->
      <el-col :xs="{ span: 0 }" :lg="{ span: 8, offset: 1 }">
        <!-- 这里是子应用使用动态渲染的方式 router开启之后，会以index为路由进行跳转-->
        <!-- 这里有个bug,默认激活的的菜单应该是动态的，在刷新页面的时候才能随着路由的变化而改变 -->
        <el-menu
          v-if="!!MenuList.length"
          mode="horizontal"
          :default-active="activeItem"
          router
        >
          <el-menu-item :index="item.route" v-for="(item, index) in MenuList" :key="index">
            <i :class="item.icon"></i>
            <span slot="title">{{item.name}}</span>
          </el-menu-item>
        </el-menu>
        <!-- 管理员的用户名-->
        <span class="mannager" v-if="userInfo.Mana_Name">{{userInfo.isSuper ? "超级管理员" : '管理员'}}：{{userInfo.Mana_Name}}</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "Header",
  props: ["MenuList",'DayWeather'],
  data() {
    return {
      activeItem: '/test', // 激活的菜单
    }
  },
  computed: {
    ...mapState(['userInfo'])
  },
  created () {
    // 使用正则计算计算当前的路由
    //"/mannage/admin/index"
    let currentRoute = this.$route.path
    // 贪婪匹配
    let match = /^\/[a-zA-z]+/
    let res = currentRoute.match(match)
    this.activeItem = res[0]
    //console.log('currentRoute',currentRoute)
  },
  mounted() {
    // console.log("header.vue", this.MenuList);
  },
};
</script>

<style lang="less" scoped>
@import "./header.less";
</style>